<template>
    <div class="shopping-cart">
        <h1>购物车</h1>
        <div class="content">
            <!-- 商品列表组件，触发添加商品到购物车的事件 -->
            <ProductList @add-to-cart="addToCart" class="product-list" />
            <!-- 购物车组件，传递购物车中的商品和移除商品的事件 -->
            <Cart :items="cartItems" @remove-item="removeFromCart" class="cart" />
        </div>
        <!-- 显示购物车总金额的组件 -->
        <CartTotal :items="cartItems" />
    </div>
</template>

<script setup>
// 引入 Vue 的 ref 函数用于响应式数据
import { ref } from 'vue';
// 引入其他组件
import ProductList from './ProductList.vue';
import Cart from './Cart.vue';
import CartTotal from './CartTotal.vue';

// 定义响应式的购物车商品数组
const cartItems = ref([]);

// 添加商品到购物车的函数
const addToCart = (product) => {
    // 检查购物车中是否已存在该商品
    //find 方法会遍历数组并返回第一个满足条件的元素
    const existingItem = cartItems.value.find(item => item.id === product.id);
    if (existingItem) {
        // 如果存在，增加数量
        existingItem.quantity++;
    } else {
        // 如果不存在，添加新商品，数量设为 1
        //...product: 将 product 对象的所有属性（如 id、name、price）复制到新对象中。
        cartItems.value.push({ ...product, quantity: 1 });
    }
};

// 从购物车中移除商品的函数
const removeFromCart = (itemId) => {
    // 过滤掉已移除的商品，更新购物车
    //filter 方法遍历整个数组，返回一个新数组，该数组包含所有满足提供的测试函数的元素。
    cartItems.value = cartItems.value.filter(item => item.id !== itemId);
};
</script>

<style scoped>
/* 购物车的主要容器样式 */
.shopping-cart {
    max-width: 800px; /* 最大宽度 */
    margin: auto; /* 居中对齐 */
    padding: 20px; /* 内边距 */
}

/* 内容区域样式 */
.content {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: space-between; /* 组件之间的间距 */
    gap: 20px; /* 组件之间的间距 */
}

/* 标题样式 */
h1 {
    text-align: center; /* 标题居中 */
}
</style>